<template>
	<el-dialog v-model="dialog" title="分配菜单" width="50%" destroy-on-close v-loading="loading">
		<div class="hx-menus">
			<el-tree ref="menuRef" :data="menuList" :props="defaultProps" node-key="id" show-checkbox @check="handleChange">
				<template #default="{ node, data }">
					{{ $t(node.label) }}</template>
			</el-tree>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialog = false">取 消</el-button>
				<el-button type="primary" @click="onsubmit" :loading="loading">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, nextTick } from 'vue';
import { getList, getMenusByRole } from '/@/api/upms/menu';
import { saveRoleMenu, getByTenantId } from '/@/api/upms/sysrole';
import { ElMessage } from 'element-plus';
interface DataState {
	menuList: Array<any>;
	menuIds: Array<string>;
	sysRole: any;
}
export default defineComponent({
	emits: ['initPage'],
	setup(props, { emit }) {
		const menuRef = ref();
		const dialog = ref(false);
		const data = reactive<DataState>({ menuList: [], menuIds: [], sysRole: {} });
		const tenantId = ref();
		const loading = ref(false);
		const defaultProps = {
			children: 'children',
			label: 'label',
			disabled: 'disabled',
		};
		/**
		 * 选择菜单权限事件
		 */
		const handleChange = () => {
			let checkedKeys = menuRef.value.getCheckedKeys(false);
			let halfCheckedKeys = menuRef.value.getHalfCheckedKeys(false);
			data.menuIds = [...checkedKeys, ...halfCheckedKeys];
		};
		/**
		 * 查询菜单树数据
		 */
		const getMenuList = () => {
			getList().then((response) => {
				data.menuList = response.data.data;
			});
		};
		/**
		 * 获取指定角色的菜单
		 */
		const getTenantMenus = (id: string) => {
			loading.value = true;
			tenantId.value = id;
			getByTenantId(id).then((response) => {
				data.sysRole = response.data.data;
				getRoleMenus();
				loading.value = false;
			});
		};
		const getRoleMenus = () => {
			if (data.sysRole) {
				getMenusByRole({ roleId: data.sysRole.id, tenantId: tenantId.value }).then((response) => {
					if (response.data.data) {
						data.menuIds = response.data.data;
						response.data.data.forEach((id: string) => {
							nextTick(() => {
								menuRef.value.setChecked(id, true, false);
							});
						});
					}
				});
			}
		};
		const onsubmit = () => {
			loading.value = true;
			saveRoleMenu({ roleId: data.sysRole.id, menuIds: data.menuIds }).then((response) => {
				loading.value = false;
				ElMessage.success('更新成功');
				dialog.value = false;
				emit('initPage');
			});
		};
		const initMenu = (id: string) => {
			dialog.value = true;
			getTenantMenus(id);
		};
		getMenuList();
		return {
			dialog,
			menuRef,
			defaultProps,
			tenantId,
			loading,
			initMenu,
			handleChange,
			getTenantMenus,
			getMenuList,
			onsubmit,
			getRoleMenus,
			...toRefs(data),
		};
	},
});
</script>
<style>
.hx-menus {
	height: 500px;
	overflow-y: auto;
	width: 100%;
	border: 1px solid #dcdee0;
	padding: 4px;
	border-radius: 4px;
}
</style>
